/**
 * 在 React 中,如何实现私有作用域样式
 *
 *  1. 使用 css module
 *    1. css 文件需要修改为 xxx.module.css
 *    2. 引入时,需要用变量接受
 *      import style from './xxx.module.css'
 *    3. 使用 style.xxx 来作为类名
 *  2. 使用 scss 或 less 这些预处理器语言 + 嵌套语法 + 每个组件根元素都起一个不同的类名
 *
 *  3. 使用 css in js 的库: styled-components
 *    1. 使用 styled-components 模块能让我们创建出带有私有样式的组件
 *  4. 使用 行内style
 *
 * PS: css module 引入的样式为何能实现私有化
 *    1. 在css文件中写的类名,经过编译会加上一些随机值.
 *      .box  => ._box_jz0ke_1
 *
 */

import React from "react";

import Hello from "./components/Hello";
import World from "./components/World";
import HelloWorld from "./components/HelloWorld";
import styled from "styled-components";

const ButtonRed = styled.button`
  color: red;
`;

const ButtonBlue = styled.button`
  color: blue;
`;

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>样式相关</h1>
        <ButtonRed>红色按钮</ButtonRed>
        <ButtonBlue>蓝色按钮</ButtonBlue>
        <div className="box"></div>
        <hr />
        <Hello />
        <hr />
        <World />
        <hr />
        <HelloWorld />
      </div>
    );
  }
}

export default App;
